<template>
  <div id="app" style="font-size: 26px; font-weght: bold; margin: 30px 0">
    <div class="cont">
      <header class="header">
        <div class="everyBox">
          <span class="span">时间范围：</span>
          <el-date-picker
            v-model="value2"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="datePicker"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </div>
        <!--      <div style="margin: 0 10px">-->
        <!--        <el-select v-model="select" placeholder="请选择">-->
        <!--          <el-option-->
        <!--            v-for="item in options"-->
        <!--            :key="item.value"-->
        <!--            :label="item.label"-->
        <!--            :value="item.value">-->
        <!--          </el-option>-->
        <!--        </el-select>-->
        <!--      </div>-->
        <div style="margin: 0 10px">
          <el-button type="primary" icon="el-icon-search" @click="search"
            >搜索</el-button
          >
        </div>
        <div>
          <el-button
            type="primary"
            size="mini"
            v-for="(item, index) in ConditionsList"
            :key="index"
            >{{ item }}</el-button
          >
        </div>
      </header>
      <div class="body">
        <div id="echat" style="width: 100%; height: 400px"></div>
        <div class="unlod">
          <span>
            <download-excel
              :fields="exportDataStandard"
              :data="tableData"
              type="xls"
              :name="exportName"
              :defaultValue="exportDefaultValue"
              :fetch="createExportData"
              :before-generate="startDownload"
              :before-finish="finishDownload"
              worksheet="导出信息"
            >
              <!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
              <span><i class="el-icon-download"></i>下载明细</span>
            </download-excel>
          </span>
        </div>
        <el-table
          :data="tableData"
          border
          fit
          @selection-change="handleSelectionChange"
          max-height="600"
          style="width: 100%"
        >
          <el-table-column prop="time" label="日期"> </el-table-column>
          <el-table-column prop="allPrice" label="全部金额"> </el-table-column>
          <el-table-column prop="allNum" label="全部数量"> </el-table-column>
          <el-table-column prop="daiPrice" label="待支付金额">
          </el-table-column>
          <el-table-column prop="daiNum" label="待支付数量"> </el-table-column>
          <el-table-column prop="yiPrice" label="已付款金额"> </el-table-column>
          <el-table-column prop="yiNum" label="已付款数量"> </el-table-column>
          <!--        <el-table-column-->
          <!--          prop="date"-->
          <!--          label="提现金额"-->
          <!--        >-->
          <!--        </el-table-column>-->
          <!--        <el-table-column-->
          <!--          prop="date"-->
          <!--          label="提现笔数"-->
          <!--        >-->
          <!--        </el-table-column>-->
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { getOrder, FINANCE } from "../../../utils/api";

export default {
  name: "Statistics",
  data() {
    return {
      exportDataStandard: {
        日期: "time",
        全部金额: "allPrice",
        全部数量: "allNum",
        待支付金额: "daiPrice",
        待支付数量: "daiNum",
        已付款金额: "yiPrice",
        已付款数量: "yiNum",
      },
      exportName: "财务收款",
      // exportDefaultValue: "这一行这一列没有数据",
      exportDefaultValue: " ",

      token: sessionStorage.getItem("token"),

      tableData: [],
      orderxAxis: {},
      orderLegend: {},
      orderSeries: {},
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
        disabledDate: function (time) {
          return time.getTime() > Date.now() - 8.64e6;
        },
      },
      value2: [
        this.getNowTime(
          new Date(new Date().getTime() - 6 * 24 * 60 * 60 * 1000)
        ),
        this.getNowTime(new Date()),
      ],
      time: "",
      radio2: "",
      // ConditionsList:['今日','昨日','本周','上周','本月','上月','7日内','一月内','三月内','半年内','一年内'],
      ConditionsList: [],
      select: "1",
      options: [
        { value: "1", label: "小时" },
        { value: "2", label: "天" },
      ],
    };
  },
  methods: {
    datePicker(e) {
      this.time = "";
      if (e != null) {
        e.forEach((item) => {
          // console.log(item)
          this.time += this.getNowTime(item) + ",";
        });
        this.time = this.time.slice(0, this.time.length - 1);
      } else {
        this.time = "";
      }
    },
    getNowTime(time) {
      let date = new Date(time);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      let hour = date.getHours();
      let minute = date.getMinutes();
      let seconds = date.getSeconds();
      month = month < 10 ? "0" + month : month;
      day = day < 10 ? "0" + day : day;
      hour = hour < 10 ? "0" + hour : hour;
      minute = minute < 10 ? "0" + minute : minute;
      seconds = seconds < 10 ? "0" + seconds : seconds;
      return year + "-" + month + "-" + day;
    },
    startDownload() {
      if (this.tableData.length < 0) {
        this.$message("没有可下载的数据");
        return;
      }
      console.log("数据开始");
    },
    finishDownload() {
      console.log("数据下载完成");
    },
    createExportData() {
      return this.tableData;
    },
    handleSelectionChange() {},
    search() {
      if (this.time) {
      } else {
        this.value2.forEach((item) => {
          this.time += this.getNowTime(item) + ",";
        });
        this.time = this.time.slice(0, this.time.length - 1);
      }
      this.getOrder();
    },
    getOrder() {
      FINANCE(this.token, this.time)
        .then((res) => {
          if (res.data.status == 200) {
            this.orderxAxis = res.data.xAxis[0];
            this.orderLegend = res.data.legend;
            this.orderSeries = res.data.series;
            this.createEcharts();
            let form = res.data.data;
            this.tableData = [];
            form.time.forEach((item, index) => {
              this.tableData.push({
                time: item,
                allPrice: form.orderMark_order_amount[index],
                allNum: form.orderMark_num[index],
                daiPrice: form.orderMarkdai_order_amount[index],
                daiNum: form.orderMarkdai_num[index],
                yiPrice: form.orderMarkyifu_order_amount[index],
                yiNum: form.orderMarkyifu_num[index],
              });
            });
            let allPrice = 0;
            let allNum = 0;
            let daiPrice = 0;
            let daiNum = 0;
            let yiPrice = 0;
            let yiNum = 0;
            this.tableData.forEach((item) => {
              allPrice += Number(item.allPrice);
              allNum += Number(item.allNum);
              daiPrice += Number(item.daiPrice);
              daiNum += Number(item.daiNum);
              yiPrice += Number(item.yiPrice);
              yiNum += Number(item.yiNum);
            });
            this.tableData.push({
              time: "总计",
              allPrice: allPrice.toFixed(2),
              allNum: allNum.toFixed(2),
              daiPrice: daiPrice.toFixed(2),
              daiNum: daiNum.toFixed(2),
              yiPrice: yiPrice.toFixed(2),
              yiNum: yiNum.toFixed(2),
            });
          } else if (!res.data.status) {
            this.$message.error(res.data.msg);
          }
        })
        .catch((err) => {
          if (err.message == "Network Error") {
            this.$message.error("网络错误，请重新链接");
          } else {
            this.$message.error("请求失败");
          }
        });
    },

    createEcharts() {
      let EChart = this.$echarts.init(document.getElementById("echat"));
      let config = {
        title: { text: "" },
        tooltip: {
          trigger: "axis",
        },
        xAxis: this.orderxAxis,
        yAxis: {},
        legend: this.orderLegend,
        toolbox: {
          feature: {
            saveAsImage: {}, //保存为图片
          },
        },
        series: this.orderSeries,
      };
      EChart.setOption(config);
    },
  },
  mounted() {
    // console.log(new Date().getTime() - 6 * 24 * 60 * 60 * 1000)
    if (this.time) {
    } else {
      this.value2.forEach((item) => {
        this.time += this.getNowTime(item) + ",";
      });
      this.time = this.time.slice(0, this.time.length - 1);
    }
    this.getOrder();
  },
};
</script>

<style scoped>
/deep/.header {
  background: white !important;
  box-shadow: 0 5px 10px #ddd;
  min-height: 40px;
  display: flex;
  padding: 10px;
  align-items: center;
  width: 97%;
  margin: 10px auto;
}
.header .everyBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 10px 0;
}
.header .span {
  font-size: initial;
}
.body {
  padding: 10px;
  margin-top: 20px;
  background: #fff;
  border: 1px solid #dcdfe6;
  font-size: initial;
}

.unlod {
  text-align: right;
  margin: 10px auto;
  width: 98%;
  cursor: pointer;
  font-size: 14px;
}
.cont {
  height: 85vh;
  overflow: auto;
}
</style>
